<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀英雄选择</title>
    <link rel="stylesheet" href="/src/assets/index.css">
    <!-- 在html中尽量使用相对路径 -->
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script src="/node_modules/axios/dist/axios.min.js"></script>
    <script src="/node_modules/lodash/lodash.min.js"></script>
</head>
<body>
    
  </head>
  <body>
    aaa
    <!-- 创建页面容器 -->
    <div id="app">
      <div class="container">
        <!-- 上面搜索部分 -->
        <div class="search">
          <div class="title">
            <p>综合</p>
            <p>定位</p>
          </div>
          <div class="types">
            <div v-for="(value, k) in typeList" :key="k" class="type-list">
                <div
                  v-for="item in value"
                  class="radio"
                  :class="{checked: checked === item.value}"
                  @click="changeType(k, item.value)"
                >
                  {{item.name}}
                </div>
              </div>
          </div>
          <div class="keyword">
            <div class="input">
                <input
                type="text"
                placeholder="请输入你要搜索的英雄名"
                :value="keyword"
                @input="changeKeyword"
              />
            </div>
          </div>
        </div>

        <ul class="list">
            <li v-for="hero in filterHeros" :key="hero.id_name" >
            <!--  <li v-for="hero in heroList" :key="hero.id_name"> -->
              <a :href="heroDetail(hero.ename)" target="_blank">
                <img :src="heroImage(hero.ename)" />
                <span v-html=" hero.cname"></span>
              </a>
            </li>
          </ul>
      </div>
    </div>
    <script src="./src/js/index.js"></script>
</body>
</html>